<template>

<div>
     <div class="top">
            <van-nav-bar
            title="会员资料"
            left-text="返回"
            left-arrow
            class="header"
            @click-left="$router.back(-1)"
            />
        </div>
    <div class="vipinfo">
        <form actions="">
            <!-- <div class="logo"><label>头像：</label><img :src="viplogo" /><b @click="UploadImage" class="changeImage">▶</b></div> -->
              <div class="logo"><label>头像：</label>
              <van-uploader :after-read="onRead" accept="image/gif, image/jpeg, image/png" multiple class="upload"	>
  <van-icon name="add" class="add" />
</van-uploader>
<img :src="log ? log :viplogo" />

</div>
            <div class="password">
           <van-cell-group   class="pwd">
  <van-field class="mm"
    value="*******"
    label="密码："

    disabled

  />
</van-cell-group><router-link to="/modifym" ><span class="modiflypassword">修改</span></router-link></div>



            <div class="successtrouc">
                <label>成功申明：</label>
                <textarea type="text" v-model="cgsm" placeholder="请输入成功申明" rows="5" cols="41"></textarea>
            </div>
            <div class="desc">
                <label>简介：</label>
                <textarea type="text"   v-model="cgjz" placeholder="请输入成功简介" rows="5" cols="41"></textarea>
            </div>


            <button class="subitBtn" @click="submit">确定</button>
        </form>
    </div>
</div>
</template>

<script>
import { Toast, Uploader } from 'vant'
import axios from 'axios'
export default {
    name: 'PerfectInfoIndex',
    data () {
          return {
              viplogo: 'static/img/head.png',
              logo:'',
              cgsm:'',
              cgjz:'',
              pwd:'',
              type:'',
              log:'',

          }
      },
    methods:  {
        UploadImage: function () {
            console.log('这里更换头像方法')
        },
onRead:function(res){

console.log(res)

this.type=res.file.type;
console.log(res)
if(this.type==""){
    Toast('请上传正确图片格式');
    return;
}
else{
  this.log=res.content
this.uploadpic(this.log,this.type,'/api/file/icon')
}

},
uploadpic:function (e,type,url){
                  var token=localStorage.getItem('token');
                  var self = this

                  let file = e
                  /* eslint-disable no-undef */
                  let param = new FormData()  // 创建form对象
                  param.append('file', file)  // 通过append向form对象添加数据
                   param.append('type', type)
                  // console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
                  let config = {
                    headers: {'Content-Type': 'multipart/form-data',  'Authorization': 'Bearer ' + token}
                  }
                 // 添加请求头
                axios.post(url, param, config)
                    .then(response => {
                      console.log("222222");

                      console.log(response)

                      Toast('上传头像成功')
                    })
            },
submit:function(){
  var log =this.log;
  var cgsm =this.cgsm;
  var cgjz =this.cgjz;
  var that=this;

    var userid=localStorage.getItem('userid');
    var token=localStorage.getItem('token');
  if(log==""){
    Toast('请上传头像');
    return;
  }
  else if(cgsm==""){
    Toast('请填写成功声明');
    return;
  }
  else if(cgjz==""){
  Toast('请填写简介')
  }else{
axios.post('/api/user/modify',{
id:userid,
intro:cgjz,
applyreason:cgsm
},{
    headers: {
            'Authorization': 'Bearer ' + token
        },
})
.then(response=>{
  console.log(response)
  Toast.success({
    message:'提交成功',
    duration:1000
  });


    setTimeout(function(){
      that.$router.push({path:'/mine'})
    },1500)
})



  }




},



    },
   mounted() {

    var userid=localStorage.getItem('userid');
    var token=localStorage.getItem('token');

  console.log(userid)
  console.log(token)
 axios.get('/api/user/info',{
  headers: {
            'Authorization': 'Bearer ' + token
        },
        params: {
          id: userid,
        }
      })
      .then((response) => {
        console.log(response.data);//请求的返回体
        this.member=response.data.data;
    this.log=response.data.data.icon;
  this.cgsm=response.data.data.applyreason;
  this.cgjz=response.data.data.intro;
console.log(this.member)
      })
      .catch((error) => {
        console.log(error);//异常
      });

  }

}

</script>
<style >
.mm{color: #8C8C8C}

.password{padding :1rem 0rem !important;margin-left: 5%}

.password .pwd{  height: 3rem;}


.vipinfo .upload{position :absolute;
  left :87%}


.vipinfo .add{
     font-size: 1rem;
   color :#259e7b

}

.top .header{
     background: #259e7b;
    color: #ffffff
}

.top .van-nav-bar__text, .top .van-icon-arrow::before{
   color: #ffffff !important
}

.vipinfo div{
    position: relative;
    display: flex;
    padding: 0.8rem .3rem;
    align-items: center
}

 label{
      display: inline-block;
    text-align: right;
    min-width: 4rem;
    color: #8C8C8C;
 }
/*
 span{
       position: absolute;
    color: #aaa9aa;
    border-radius: 1rem;
    padding: 0.1rem 0.8rem;
    border: 1px solid #aaa9aa;
    right: 2.5rem

 } */

 textarea{
      background: #EEEEEE;
    border: 0;
    padding: .5rem;
    resize: none;
    border-radius: .5rem;
    font-size: .7rem
 }

 input{
     padding: .2rem .5rem
 }

.logo img{
  position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    right: 3rem;
}

.logo .changeImage{
    color: #259e7b;
    position: absolute;
    right: 1rem;
    padding: .5rem;
}

.password{

    border-left:0;
    border-right:0
}

.subitBtn{
  border-radius: 2rem;
  padding: 0.7rem 6rem;
  display: inline;
  margin:3rem 20%;
  background: #259e7b;
  color: #ffffff
}

</style>
